<template>
    <div >
        <!--这里需要传一个 currentUser 参数  因为导航栏要使用，不传会报错-->
<!--        <top-nav v-bind:currentUser="currentUser" ></top-nav>-->
        <top-nav @updateUser="setCurrentUser"></top-nav>
        <!--        <div style="width:700px; margin: auto; text-align: center"></div>-->
        <el-row type="flex" justify="center" class="main_body">
            <el-col :span="12">
                <h1 class="center">发表帖子</h1>
                <!--分割线-->
                <el-row type="flex" justify="center">
                    <el-col :span="15">
                        <el-divider></el-divider>
                    </el-col>
                </el-row>

                <div v-if="logined">
                    <el-form v-if="joined" label-position="top" label-width="100px" :model="postForm" id="postForm" class="publish_post_form font" :rules="rules" ref="ruleForm">
                        <div class="el-upload__tip tips">tips: （选择需要发帖的贴吧，必选且仅能选择一个）</div>
                        <!--使用表单验证 el-form-item 里的 prop属性是必选的  而且必须是 el-form通过model绑定的表单里的字段 -->
                        <el-form-item label="选择贴吧：" prop="barChosen">
                            <!--特殊贴吧  -->
                            <div v-if="specialBar != null">
                                <el-row>
                                    <el-col :offset="2">
                                        <i class="el-icon-s-help"></i><span class="color_blue">特殊贴吧：</span>  <span class="tips">tips: （在  “我的私密”  贴吧发表的帖子只有自己能看到哦~！）</span>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" justify="center">
                                    <el-col :span="14" >
                                        <div class="publish_post_bar">
                                            <!--和下面的 el-radio-group 绑定同一个变量 即可，则 各个单选框是互斥的-->
                                            <el-radio-group v-model="postForm.barChosen">
                                                <el-radio :label="specialBar.id" border >{{specialBar.name}}</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <!--普通贴吧-->
                            <el-row>
                                <el-col :offset="2">
                                    <i class="el-icon-help"></i><span class="color_blue">普通贴吧：</span>
                                </el-col>
                            </el-row>
                            <el-row type="flex" justify="center">
                                <el-col :span="14" >
                                    <div class="publish_post_bar">
                                        <el-radio-group v-model="postForm.barChosen">
                                            <el-radio :label="bar.id" border v-for="bar in joinedBars" :key="bar.id">{{bar.name}}</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="标题：" prop="title">
                            <el-row type="flex" justify="center">
                                <el-col :span="17" >
                                    <el-input v-model="postForm.title"></el-input>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="内容：" prop="content">
                            <!--调用wangEditor 编辑器-->
<!--                            <div id="editor" v-show="showEditor">-->
                            <div id="editor" >

                            </div>
                        </el-form-item>
                        <!--文件上传-->
                        <!--可以通过 accept来指定接收的图片，但只是它打开文件选择器之后 默认帮你选择分类为对应的类型，
                            这个时候你还是可以选择.所有文件，然后选择非accept文件类型的文件
                            所以这里还是要在选择文件之后进行一个判断-->
                        <el-form-item label="选择图片(可选)：">
                            <addPic ref="myAddPic"></addPic>
                        </el-form-item>
                        <el-form-item class="center bottom_btns">
                            <el-button size="medium">存草稿</el-button>
                            <el-button type="success" @click="publish('ruleForm')" size="medium">立即发表</el-button>
                        </el-form-item>
                    </el-form>
                    <el-row v-else type="flex" justify="center" class="login_info_row" >
                        <el-col :span="13" >
                            <el-card class="box-card">
                                <el-row type="flex" justify="center">
                                    <el-col :span="15">
                                        <p>用户当前还未加入任何贴吧，</p>
                                        <p>请加入贴吧后再进行发帖操作！</p>
                                        <div class="center login_btn_div">
                                            <el-button type="primary" plain size="medium" @click="toIndex">返回首页</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <el-row v-else type="flex" justify="center" class="login_info_row" >
                    <el-col :span="13" >
                        <el-card class="box-card" shadow="hover">
                            <el-row type="flex" justify="center">
                                <el-col :span="13">
                                    <p>用户当前还未登录，</p>
                                    <p>请登录后再进行发帖操作！</p>
                                    <div class="center login_btn_div">
                                        <el-button type="primary" plain size="medium" @click="backToLogin">立即登录</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import E from 'wangeditor';
    import navigateBar from "@/components/component/navigateBar"; //顶部导航栏，引用的
    import addPicture from "@/components/component/addPicture"; // 底下的添加图片 栏  引用的

    var formData = new FormData(); //++++++++++
    // var fileList = [];
    export default {
        name: "publishPost",
        data(){
            /*检验 编辑器内容是否为为为空 （目前：就单单选择一些样式而不输入实际内容 this.editor.txt.html() 也不为空，而是一些标签什么的）*/
            /*但this.editor.txt.text()  可以获取你实际输入的内容  有内容就是有内容 没有就是没有*/
            var checkContentNotNull = (rule, value, callback) => {
                if (this.editor.txt.text() === ''){
                    callback(new Error("请输入帖子内容！"));
                }else {  /*不为空则正常返回*/
                    callback();
                }
            };
            return{
                rules: {  /*一些简单的 表单验证*/
                    barChosen: [
                        { required: true, message: '请选择且仅能选择一个贴吧！', trigger: 'change' }
                    ],
                    title: [
                        { required: true, message: '请输入帖子标题', trigger: 'blur' },
                        { min: 0, max: 30, message: '请输入有效的贴吧名称！', trigger: 'blur' },
                    ],
                    content: [
                        { validator: checkContentNotNull, trigger: 'blur' },
                        { required: true, trigger: 'blur' },  /*设置必须  排在validator 后面  实际只是表现一个*的效果*/
                    ]
                },
                /*当使用element 对话模态框框组件时  这个wangEditor 还是会显示  然后影响那个对话框  这里设置一个变量控制当显示模态框时隐藏编辑器（v-show）*/
                /*设置了 编辑器的z-index  这个就不需要了*/
                // showEditor: true,
                joinedBars: [], /*（当前登录用户）用户已经加入的贴吧*/
                specialBar: null, // 特殊贴吧  目前是只有一个  -- 私密贴吧
                // currentUser: { /*当前用户*/
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     nickName: '',
                //     motto: '',
                //     role: '',
                // },
                currentUser: {}, /*当前用户*/
                postForm: {  /* {} 对象类型 */
                    barChosen: '',  /*选择贴吧对应的编号*/
                    title: "",  //标题
                    content: "",  //内容 （包含样式标签）
                    pure_content: "", // 纯内容   不包含标签
                },
                editor: null,
                logined: true, /*默认已登录*/
                joined: true  /*默认加入了贴吧*/
            }
        },
        created(){  //页面加载时（前）执行  (dom元素还未被渲染  无法获取 this.$ref.myAddPic.init(2, "small");  执行不了  找不到this.$ref.myAddPic(undefined))
            // if (this.$route.params.role != null){
            //     this.dataGet = this.$route.params.role;
            // }else
            //     this.dataGet = '没获取到';
            //创建页面的时候 访问后台数据  获取当前登录用户信息  以及当前登录用户加入的贴吧
            // this.$http.get("http://localhost:8081/post/getUserBar").then(req=>{
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postUserBar).then(req=>{
                if (req.data !== ''){
                    if (req.data.rs.result_code === 200){  //用户正常登录  且加入了贴吧
                        /*初始化当前用户信息*/
                        // this.currentUser.headImg = "http://localhost:8081/static/images/userAvatar/" + req.data.user.headImg;
                        // this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.user.headImg;
                        // this.currentUser.nickName = req.data.user.nickName;
                        // this.currentUser.motto = req.data.user.motto;
                        // this.currentUser.role = req.data.user.role;
                        /*初始化贴吧（单选框信息）*/
                        // this.joinedBars = req.data.list;
                        // 把私密贴吧 和 普通贴吧 剥离开来
                        for (let i = 0; i < req.data.list.length; i++){
                            if (req.data.list[i].name === '我的私密'){
                                this.specialBar = req.data.list[i];
                            }else {
                                this.joinedBars.push(req.data.list[i]);
                            }
                        }
                    }else if (req.data.rs.result_code === 605){ //用户未登录
                        this.logined = false;
                    }else if (req.data.rs.result_code === 607){ //用户未加入任何贴吧
                        /*初始化当前用户信息*/
                        // this.currentUser.headImg = "http://localhost:8081/static/images/userAvatar/" + req.data.user.headImg;
                        // this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.user.headImg;
                        // this.currentUser.nickName = req.data.user.nickName;
                        // this.currentUser.motto = req.data.user.motto;
                        // this.currentUser.role = req.data.user.role;
                        this.joined = false;
                    }else if (req.data.rs.result_code === 303){ //数据库查询发生异常
                        this.$message.error("数据库查询发生异常。");
                    }else {  //未知错误
                        this.$message({
                            type: "error",
                            duration: 0,  //不自动关闭
                            message: "未知错误！",
                        });
                    }
                }else {
                    this.$message({
                        type: "error",
                        duration: 0,  //不自动关闭
                        message: "糟糕，服务器出事了。。",
                    });
                }
            })

        },
        mounted(){   //页面加载时执行（后）执行（此时dom元素已经加载完毕  可以获取了）
            /*初始化 图片照片墙*/
            // let v = 'myAddPic';
            // this.$refs[v].init(3, "small");
            this.$refs.myAddPic.init(3, "default");

            const editor = new E( document.getElementById('editor') );

            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                this.postForm.content = newHtml
            };

            // 设置编辑区域高度为 500px
            editor.config.height = 400;
            editor.config.zIndex = 0;  // 将显示优先级设置为0  免得影响一些模态框之类的
            editor.create();

            this.editor = editor;
        },
        methods:{

            // 设置当前用户信息
            setCurrentUser(curUser){
                this.currentUser = curUser;

                // 无论是否登录， 子组件都会传值过来初始化（子组件created 中的异步代码）
                if (this.currentUser.role === ''){
                    this.$message({
                        message: '当前您未登录！',
                        type: 'warning'
                    });
                }
            },

            /*返回首页*/
            toIndex(){
                this.$router.push({name:"index"}); //跳转到 index.vue
            },

            backToLogin(){  /*返回登录*/
                this.$router.push({name:"login"}); //跳转到 login.vue
            },

            /*将element的钩子函数参数里的fileList（经过element封装的file对对象数组） 转化成未封装的file 数组 */
            toMultipartFileList(fileList){
                let multipartFileList = []; //声明要返回的 MultipartFile  数组

                for (let i = 0; i < fileList.length; i++){
                    let file = fileList[i];
                    console.log(file.raw);
                    multipartFileList.push(file.raw);  //把element 数组fileList里的的file  通过.raw解封装 放入一个新的数组中
                }

                return multipartFileList;
            },



            /*发表*/
            publish(formRef){
                this.$refs[formRef].validate((valid) => {
                    if (valid) {
                        formData = this.$refs.myAddPic.getFormData();  //获取  带有上传文件列表  的formData
                        formData.append("barId", this.postForm.barChosen);
                        formData.append("title", this.postForm.title);
                        formData.append("content", this.postForm.content);
                        this.postForm.pure_content = this.editor.txt.text();
                        formData.append("pure_content", this.postForm.pure_content);

                        let routeUrl; // 要跳转到的贴吧路由（如果发表正常的话）
                        // this.$http.post("http://localhost:8081/post/publish", formData).then(req=>{
                        this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.postPublish, formData).then(req=>{
                            if (req.data !== ''){
                                switch (req.data.result_code ) {
                                    case 200:  //正常成功发表
                                        this.$message.success( req.data.msg);
                                        // this.$router.push({name: 'postBarIndex'});
                                        // 跳转到 贴吧首页
                                        routeUrl = this.$router.resolve({
                                            path: "/postBarIndex",
                                            /*这样传递的参数  好像会在地址栏显示出来*/
                                            query: {barId: this.postForm.barChosen},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                                        });
                                        //在当前页面打开
                                        window.open(routeUrl.href, "_self");
                                        break;
                                    case 300:  //数据库插入失败
                                    case 303:  //数据库插入发生异常
                                    case 408:  // 文件写入发生异常
                                        // this.showEditor = false;
                                        this.$alert(req.data.msg, '错误', {
                                            confirmButtonText: '确定',
                                            type: 'error',
                                            callback: () => {
                                                // this.showEditor = true;
                                            }
                                        });
                                        break;
                                    case 605:  //未登录
                                        // this.showEditor = false;
                                        this.$confirm(req.data.msg, '错误', {
                                            distinguishCancelAndClose: true,
                                            type: 'error',
                                            confirmButtonText: '确定',
                                            cancelButtonText: '立即登录'
                                        }).then(() => {  /*点击确定*/
                                            // this.showEditor = true;
                                        }).catch(action => {
                                            if (action === 'cancel'){  /*点击立即登录*/
                                                this.$router.push({name:'login'})
                                            }else {  /*点击关闭按钮*/
                                                // this.showEditor = true;
                                            }
                                        });
                                        break;
                                    default:
                                        // this.showEditor = false;
                                        this.$alert('未知错误！', '错误', {
                                            confirmButtonText: '确定',
                                            type: 'error',
                                            callback: () => {
                                                // this.showEditor = true;
                                            }
                                        });

                                }
                            }else {
                                this.$message.error('糟糕，服务器出事了。。');
                            }
                        });
                        console.log("submit success!");
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },



        },
        beforeDestroy(){  //组件销毁时 执行
            // 调用销毁 API 对当前编辑器实例进行销毁
            this.editor.destroy();
            this.editor = null;
        },
        components: {
            'topNav': navigateBar,  //顶部导航栏
            'addPic': addPicture, //  底部的添加图片 组件
        }
    }
</script>

<style scoped>

    /*发表帖子字样*/
    h1 {
        margin-top: 26px;
    }
    #editor{/* wangEditor  编辑器*/

    }

    /*提示登录 结果的整行*/
    .login_info_row{
        margin-top: 55px;
    }

    /*提示登录  结果卡片*/
    .box-card{
        margin-bottom: 200px
    }
    /*提示登录  结果卡片 中包含立即登录按钮的div*/
    .login_btn_div{
        margin-top: 72px;
        margin-bottom: 15px;
    }

    /*底部的 两个按钮 —— 存草稿  立即发表*/
    .bottom_btns{
        margin-top: 75px;
    }
    /*"立即发辫" 按钮  设置左margin  和左边的 “存草稿” 按钮隔开来 */
    .bottom_btns button:last-child{
        margin-left: 90px;
    }

    /*选择贴吧的提示信息  （选择需要发帖的贴吧，必选且仅能选择一个）*/
    .tips{
        color: #f17008;
        font-size: 14px;
    }

    /*为整个页面（不包括顶部的导航） 添加一个灰色的背景色  */
    .main_body{
        background-color: #f3f3f3;
    }
</style>